Angular Material হলো Angular অ্যাপ্লিকেশনের জন্য একটি UI কম্পোনেন্ট লাইব্রেরি যা Google-এর Material Design principles অনুসরণ করে। এটি তৈরি করা হয়েছে আরও ইন্টারঅ্যাকটিভ এবং সুন্দর ইউজার ইন্টারফেস (UI) তৈরি করতে। Angular Material-এ বিভিন্ন প্রি-বিল্ট কম্পোনেন্ট যেমন Buttons, Input Fields, Dialogs, Menus, Navigation Bars, Cards ইত্যাদি রয়েছে, যা আপনার অ্যাপ্লিকেশনকে দ্রুত এবং সুন্দরভাবে ডেভেলপ করতে সহায়তা করে।

Angular Material ইনস্টলেশন

Angular Material ইনস্টল করার জন্য, আপনাকে প্রথমে Angular CLI ব্যবহার করে প্রয়োজনীয় প্যাকেজগুলো ইনস্টল করতে হবে।

1. Angular Material ইনস্টল করা

প্রথমে Angular CLI-এ আপনার প্রকল্পে Angular Material যোগ করতে হবে। এর জন্য নিচের কমান্ডটি রান করুন:

ng add @angular/material

এই কমান্ডটি Angular Material, Angular CDK (Component Dev Kit), এবং Angular Animations প্যাকেজগুলিকে ইনস্টল করবে এবং আপনার অ্যাপ্লিকেশনটির angular.json ফাইলে প্রয়োজনীয় কনফিগারেশন যুক্ত করবে।

2. থিম নির্বাচন করা

Angular Material ইনস্টল করার পর, একটি থিম নির্বাচন করতে হবে। Angular Material তিনটি বিল্ট-ইন থিম প্রদান করে:

• Indigo/Pink
• Purple/Green
• Deep Orange/Amber

এছাড়া, আপনি কাস্টম থিমও তৈরি করতে পারেন। ইনস্টলেশন প্রক্রিয়ায় একটি থিম নির্বাচন করতে বলা হবে। থিম নির্বাচনের জন্য আপনি নিচের কমান্ডটি ব্যবহার করতে পারেন:

ng add @angular/material --theme indigo-pink

3. অ্যাঙ্কুলার অ্যানিমেশনস ইনস্টল করা

Angular Material এর বেশিরভাগ কম্পোনেন্ট সুন্দর অ্যানিমেশন সহ কাজ করে, যা @angular/animations প্যাকেজের উপর নির্ভরশীল। এই প্যাকেজটি Angular Material ইনস্টলেশনের অংশ হিসেবে স্বয়ংক্রিয়ভাবে ইনস্টল হয়ে যাবে। যদি না হয়, তবে নিচের কমান্ডটি দিয়ে ইনস্টল করা যায়:

npm install @angular/animations

4. অ্যাপ্লিকেশনে Angular Material মডিউল অন্তর্ভুক্ত করা

Angular Material এর কম্পোনেন্ট ব্যবহার করতে হলে, সেগুলোর মডিউল আপনার অ্যাপ্লিকেশনে অন্তর্ভুক্ত করতে হবে। উদাহরণস্বরূপ, যদি আপনি Button এবং Card কম্পোনেন্ট ব্যবহার করতে চান, তবে আপনাকে নিচের মডিউলগুলো ইনক্লুড করতে হবে:

import { MatButtonModule } from '@angular/material/button';
import { MatCardModule } from '@angular/material/card';
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

@NgModule({
  declarations: [
    // Your components
  ],
  imports: [
    BrowserModule,
    MatButtonModule,   // Button module
    MatCardModule      // Card module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

এখানে, MatButtonModule এবং MatCardModule দুটি মডিউল অ্যাপ্লিকেশনে অন্তর্ভুক্ত করা হয়েছে, যার ফলে Button এবং Card কম্পোনেন্টগুলি ব্যবহার করা যাবে।

Angular Material কম্পোনেন্ট ব্যবহার করা

Angular Material এর কম্পোনেন্টগুলো ব্যবহার করা অনেক সহজ এবং এগুলি অত্যন্ত কাস্টমাইজেবল। নিচে কিছু সাধারণ কম্পোনেন্টের উদাহরণ দেওয়া হলো:

1. Button কম্পোনেন্ট

<button mat-button>Click me!</button>

এখানে, mat-button ডিরেক্টিভটি বাটনটিকে Material Design স্টাইল অনুসারে স্টাইল করতে ব্যবহৃত হচ্ছে।

2. Card কম্পোনেন্ট

<mat-card>
  <mat-card-header>
    <mat-card-title>Card Title</mat-card-title>
    <mat-card-subtitle>Card Subtitle</mat-card-subtitle>
  </mat-card-header>
  <mat-card-content>
    Content goes here...
  </mat-card-content>
</mat-card>

এখানে, mat-card কম্পোনেন্টটি একটি Material Design স্টাইলের কার্ড তৈরি করবে। এতে টাইটেল, সাবটাইটেল, এবং কনটেন্ট বিভাগ থাকবে।

3. Input কম্পোনেন্ট

<mat-form-field appearance="fill">
  <mat-label>Enter your name</mat-label>
  <input matInput placeholder="Ex. John Doe">
</mat-form-field>

এখানে, mat-form-field এবং matInput ব্যবহার করে একটি সুন্দর ফিল্ড তৈরি করা হয়েছে যেখানে Material Design ইনপুট স্টাইল ব্যবহার করা হয়েছে।

Angular Material মডিউল কনফিগারেশন

আপনি যখন বিভিন্ন Angular Material কম্পোনেন্ট ব্যবহার করতে চান, তখন আপনাকে সেগুলোর মডিউল আপনার অ্যাপ্লিকেশনে ইম্পোর্ট করতে হবে। Angular Material-এ বহু ধরনের কম্পোনেন্ট এবং মডিউল রয়েছে, এবং আপনি সেগুলি প্রয়োজন অনুযায়ী ব্যবহার করতে পারেন।

বেশ কিছু সাধারণ মডিউল:

• MatButtonModule – বাটন কম্পোনেন্টের জন্য।
• MatInputModule – ইনপুট ফিল্ডের জন্য।
• MatToolbarModule – টুলবার কম্পোনেন্টের জন্য।
• MatCardModule – কার্ড কম্পোনেন্টের জন্য।
• MatDialogModule – ডায়ালগ (পপ-আপ) উইন্ডোর জন্য।
• MatMenuModule – মেনু কম্পোনেন্টের জন্য।

সারাংশ

Angular Material ব্যবহার শুরু করতে হলে, প্রথমে Angular Material প্যাকেজটি ইনস্টল করতে হয়। এরপর প্রয়োজনীয় থিম এবং অ্যাঙ্কুলার অ্যানিমেশনস প্যাকেজ সেটআপ করতে হয়। একবার সেটআপ হয়ে গেলে, আপনি বিভিন্ন Material Design কম্পোনেন্ট ব্যবহার করে আপনার অ্যাপ্লিকেশন তৈরি করতে পারেন, যেমন বাটন, ইনপুট ফিল্ড, কার্ড ইত্যাদি।

এটি আপনার অ্যাপ্লিকেশনকে আরও ইউজার-ফ্রেন্ডলি এবং সবার কাছে দেখতে সুন্দর করে তুলবে।